<wide-header-page title="{{'Multiple Recipients' | translate}}">
  <ion-buttons right>
    <button clear wide-header-bar-button (click)="openTransferToModal()" ion-button icon-only>
      <span translation>Add Contact</span>
    </button>
  </ion-buttons>

  <div page-content>
    <div>
      <div class="send-header-wrapper">
        <ion-item class="search-wrapper" [ngClass]="{'invalid': invalidAddress && search != ''}">
          <ion-input placeholder="{{'Add {coinName} address' | translate: {coinName: getCoinName(wallet?.coin)} }}" [(ngModel)]="search" (ngModelChange)="processInput()"></ion-input>
          <ion-icon *ngIf="invalidAddress && search != ''" item-end class="backspace-icon" name="backspace" (click)="search = ''"></ion-icon>
          <ion-icon item-end class="scan-icon" (click)="openScanner()">
            <img src="assets/img/scan-ico.svg">
          </ion-icon>
        </ion-item>
      </div>

      <ion-list class="content-list">
        <div *ngFor="let item of multiRecipients; let idx = index">
          <ion-item-divider class="item-divider-header">
            <span class="ellipsis">{{ 'Recipient' | translate}} {{idx +1}}</span>
            <ion-icon class="close-icon pointer" name="ios-close-outline" item-right (click)="removeRecipient(idx)"></ion-icon>
          </ion-item-divider>
          <ion-item (click)="openAmountModal(item, idx)" class="recipient">
            <ion-icon class="item-img wallet" item-start>
              <img *ngIf="item.recipientType == 'wallet' && item.recipient" [ngClass]="{ testnet: wallet.network === 'testnet' }" class="icon-wallet" src="assets/img/currencies/{{wallet.coin}}.svg" />
              <gravatar *ngIf="item.recipientType == 'contact' && item.recipient" [name]="item.recipient.name" [height]="40" [width]="40" [email]="item.recipient.email" [coin]="wallet.coin" [network]="wallet.network"></gravatar>
              <img *ngIf="item.recipientType == 'address'" class="coin-icon" src="assets/img/icon-{{wallet.coin}}-small.svg" alt="Coin" />
            </ion-icon>
            <ion-label>
              <span *ngIf="item.recipientType == 'wallet' && item.recipient">{{item.recipient.name}}</span>
              <span *ngIf="item.recipientType == 'contact' && item.recipient">{{item.recipient.name}}</span>
              <span *ngIf="item.recipientType == 'address'" class="ellipsis">{{item.toAddress}}</span>
            </ion-label>
            <ion-note item-end text-end>
              <div *ngIf="item.amountToShow" class="amount">
                {{item.amountToShow}} {{wallet.coin | uppercase}}
              </div>
              <div *ngIf="item.amountToShow" class="amount-str">
                {{item.altAmountStr}}
              </div>
            </ion-note>
          </ion-item>
        </div>
      </ion-list>
    </div>
    <div *ngIf="multiRecipients.length == 0" class="no-wallet-message">
      <span translate>To get started, you'll need to enter a valid address or select an existent contact or wallet.</span>
    </div>
  </div>

  <div footer-content>
    <ion-toolbar>
      <button ion-button full class="button-footer" (click)="goToConfirm()" [disabled]="isDisabledContinue || multiRecipients.length == 0">{{'Continue' | translate}}</button>
    </ion-toolbar>
  </div>
</wide-header-page>